<template>
  <div class="employees">
    <el-card class="card">
      <div class="top">
        <el-button type="primary" @click="upload">导入</el-button>
        <el-button type="primary" @click="addEmployee">+新增员工</el-button>
      </div>
    </el-card>
    <!-- 弹出框 -->
    <!-- <add :showAdd="isShow" @showChange="val => (isShow = val)"></add> -->
    <add v-model="isShow" @getsysUser="getsysUser"></add>
    <el-card>
      <el-table :data="tableData">
        <el-table-column label="序号" width="50px">
          <template slot-scope="scope">
            <div>{{ (page.page - 1) * page.size + scope.$index + 1 }}</div>
          </template>
        </el-table-column>
        <el-table-column label="姓名" prop="username"></el-table-column>
        <el-table-column label="手机号" prop="mobile"></el-table-column>
        <el-table-column label="工号" prop="workNumber"></el-table-column>
        <!-- <el-table-column
          label="聘用形势"
          prop="formOfEmployment"
          :formatter="formatter"
        ></el-table-column> -->
        <el-table-column label="聘用形势">
          <template slot-scope="scope">
            {{ scope.row.formOfEmployment | formatter }}
          </template>
        </el-table-column>
        <el-table-column label="部门" prop="departmentName"></el-table-column>
        <el-table-column label="入职时间" prop="timeOfEntry">
          <template slot-scope="scope">
            {{ scope.row.timeOfEntry | dateChande }}
          </template>
        </el-table-column>
        <el-table-column
          label="转正时间"
          prop="correctionTime"
        ></el-table-column>
        <el-table-column label="状态" prop="formOfEmployment"></el-table-column>
        <el-table-column label="操作" width="350px">
          <template slot-scope="scope">
            <div class="caozuo">
              <el-button type="text" @click="look(scope.row.id)"
                >查看</el-button
              >
              <el-button type="text">转正</el-button>
              <el-button type="text">调岗</el-button>
              <el-button type="text">离职</el-button>
              <el-button type="text">角色</el-button>
              <el-button type="text" @click="del(scope.row.id)">删除</el-button>
            </div>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页器 -->
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="page.page"
        :page-sizes="[1, 2, 5, 10]"
        :page-size="page.size"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination>
    </el-card>
  </div>
</template>

<script>
import add from './components/add'
// 导入格式化“聘用形势”的js文件
// import constant from '@/constant/employees'
import { sysUser, delEmployee } from '@/api/employess'
export default {
  components: {
    add
  },
  data () {
    return {
      // 弹出框是否显示
      isShow: false,
      // 表格数据
      tableData: [],
      // 分页器数据
      page: {
        // 当前页
        page: 1,
        // 当前页容量
        size: 5
      },
      // 总条数
      total: 10
    }
  },
  // filters: {
  //   formatter (value) {
  //     let _index = constant.hireType.findIndex(item => {
  //       return item.id === value
  //     })
  //     if (_index !== -1) {
  //       return constant.hireType[_index].value
  //     } else {
  //       return '未知'
  //     }
  //   }
  // },
  created () {
    this.getsysUser()
  },
  methods: {
    // 查看员工详情
    look (id) {
      this.$router.push('/employees/detail/' + id)
    },
    // 导入点击
    upload () {
      this.$router.push('/employees/uploadExcel')
    },

    // table自带的格式化
    // formatter (row, column, cellValue, index) {
    //   let _index = constant.hireType.findIndex(item => {
    //     return item.id === cellValue
    //   })
    //   if (_index !== -1) {
    //     return constant.hireType[_index].value
    //   } else {
    //     return '未知'
    //   }
    // },
    // 新增员工
    addEmployee () {
      this.isShow = true
    },
    // 删除功能
    del (id) {
      // 弹出确认框
      this.$confirm('确定删除吗', '温馨提示').then(async () => {
        await delEmployee(id)
        this.$message.success('删除成功')
        this.page.page = 1
        this.getsysUser()
      })
    },
    // 获取员工列表
    async getsysUser () {
      const res = await sysUser(this.page)
      this.total = res.total
      this.tableData = res.rows
      // console.log(res)
    },
    // 页容量改变触发
    handleSizeChange (pageSize) {
      this.page.size = pageSize
      this.page.page = 1
      this.getsysUser()
    },
    // 当前页改变时触发
    handleCurrentChange (current) {
      this.page.page = current
      this.getsysUser()
    }
  }
}
</script>

<style lang="scss" scoped>
.caozuo {
  display: flex;
}
.card {
  position: relative;
  height: 70px;
  .top {
    position: absolute;
    right: 30px;
  }
}
</style>
